<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Rating</h1>
        <p>Rating component is a star based selection input.</p>
    </div>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>Basic</h5> 
        <p-rating [(ngModel)]="val1"></p-rating>

        <h5>No Cancel</h5> 
        <p-rating [(ngModel)]="val2" [cancel]="false"></p-rating>

        <h5>ReadOnly</h5> 
        <p-rating [(ngModel)]="val3" readonly="true" stars="10" [cancel]="false"></p-rating>

        <h5>Disabled</h5> 
        <p-rating [(ngModel)]="val4" disabled="true" stars="10"></p-rating>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;RatingModule&#125; from 'primeng/rating';
</app-code>

            <h5>Getting Started</h5>
            <p>Two-way value binding is defined using <i>ngModel</i>.</p>
                    
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-rating [(ngModel)]="val"&gt;&lt;/p-rating&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class ModelComponent &#123;

    val: number;

&#125;
</app-code>

            <p>Defining a default value would be enough to display the initial number of selected stars.</p>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class ModelComponent &#123;

    val: number = 3;

&#125;
</app-code>

            <h5>Model Driven Forms</h5>
            <p>Rating can be used in a model driven form as well.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-rating formControlName="score"&gt;&lt;/p-rating&gt;
</app-code>

                    <h5>Properties</h5>
                    <div class="doc-tablewrapper">
                        <table class="doc-table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th>Default</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>stars</td>
                                    <td>number</td>
                                    <td>5</td>
                                    <td>Number of stars.</td>
                                </tr>
                                <tr>
                                    <td>cancel</td>
                                    <td>boolean</td>
                                    <td>true</td>
                                    <td>When specified a cancel icon is displayed to allow removing the value.</td>
                                </tr>
                                <tr>
                                    <td>disabled</td>
                                    <td>boolean</td>
                                    <td>false</td>
                                    <td>When present, it specifies that the element should be disabled.</td>
                                </tr>
                                <tr>
                                    <td>readonly</td>
                                    <td>boolean</td>
                                    <td>false</td>
                                    <td>When present, changing the value is not possible.</td>
                                </tr>
                                <tr>
                                    <td>iconOnClass</td>
                                    <td>string</td>
                                    <td>pi pi-star</td>
                                    <td>Style class of the on icon.</td>
                                </tr>
                                <tr>
                                    <td>iconOffClass</td>
                                    <td>string</td>
                                    <td>pi pi-star</td>
                                    <td>Style class of the off icon.</td>
                                </tr>
                                <tr>
                                    <td>iconCancelClass</td>
                                    <td>string</td>
                                    <td>pi pi-ban</td>
                                    <td>Style class of the cancel icon.</td>
                                </tr>
                                <tr>
                                    <td>iconOnStyle</td>
                                    <td>object</td>
                                    <td>null</td>
                                    <td>Inline style of the on icon.</td>
                                </tr>
                                <tr>
                                    <td>iconOffStyle</td>
                                    <td>object</td>
                                    <td>null</td>
                                    <td>Inline style of the off icon.</td>
                                </tr>
                                <tr>
                                    <td>iconCancelStyle</td>
                                    <td>object</td>
                                    <td>null</td>
                                    <td>Inline style of the cancel icon.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <h5>Events</h5>
                    <div class="doc-tablewrapper">
                        <table class="doc-table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Parameters</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>onRate</td>
                                    <td>event.originalEvent: browser event <br>
                                        event.value: selected value
                                    </td>
                                    <td>Callback to invoke on rate change.</td>
                                </tr>
                                <tr>
                                    <td>onCancel</td>
                                    <td>event: browser event</td>
                                    <td>Callback to invoke when value is removed.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <h5>Styling</h5>
                    <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
                    <div class="doc-tablewrapper">
                        <table class="doc-table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Element</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>p-rating</td>
                                    <td>Container element</td>
                                </tr>
                                <tr>
                                    <td>p-rating-star</td>
                                    <td>Star element</td>
                                </tr>
                                <tr>
                                    <td>p-rating-star-on</td>
                                    <td>Selected star element.</td>
                                </tr>
                                <tr>
                                    <td>p-rating-cancel</td>
                                    <td>Cancel icon.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <h5>Dependencies</h5>
                    <p>None.</p>
                </p-tabPanel>

                <p-tabPanel header="Source">
                    <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/rating" class="btn-viewsource" target="_blank">
                        <span>View on GitHub</span>
                    </a>
                    <a href="https://stackblitz.com/edit/primeng-rating-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                        <span>Edit in StackBlitz</span>
                    </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h5&gt;Basic&lt;/h5&gt; 
&lt;p-rating [(ngModel)]="val1"&gt;&lt;/p-rating&gt;

&lt;h5&gt;No Cancel&lt;/h5&gt; 
&lt;p-rating [(ngModel)]="val2" [cancel]="false"&gt;&lt;/p-rating&gt;

&lt;h5&gt;ReadOnly&lt;/h5&gt; 
&lt;p-rating [ngModel]="val3" readonly="true" stars="10" [cancel]="false"&gt;&lt;/p-rating&gt;

&lt;h5&gt;Disabled&lt;/h5&gt; 
&lt;p-rating [ngModel]="val4" disabled="true" stars="10"&gt;&lt;/p-rating&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class RatingDemo &#123;

    val1: number;

    val2: number = 3;

    val3: number = 5;

    val4: number = 5;

    val5: number;

    msg: string;
&#125;
</app-code>
                </p-tabPanel>
                <p-tabPanel header="StackBlitz">
                    <ng-template pTemplate="content">
                        <iframe src="https://stackblitz.com/edit/primeng-rating-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
                    </ng-template>
                </p-tabPanel>
            </p-tabView>
        </div>